<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>电影</title>
    <meta name="viewport"
          content="target-densitydpi=device-dpi, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="generator" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link href="/css/all-responsive-metal.css" rel="stylesheet" type="text/css">
    <link href="/css/jquery.fancybox-metal.css" rel="stylesheet" type="text/css">


    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>


</head>

<body class="no-touch">
<div class="top-links">
    <div class="center-hold">
        <div class="network">
            <strong></strong>
            <ul>
            </ul>
        </div>
        <div class="box tags-cloud">
            <a class="highlight" th:each="item:${categoryList}" style="font-weight: bold; font-size: 13px;"
               th:href="@{'/video/category?categoryId='+${item.categoryId}}">[[${item.categoryName}]] &nbsp;&nbsp;
            </a>
        </div>
        <div class="member-links">
            <ul>
                <li><a href="/video">首页</a></li>
                <li><a href="/login">登录</a></li>
                <li><a href="/register">注册</a></li>
            </ul>
        </div>
    </div>
</div>

<div class="container">
    <div class="header">
        <div class="logo">
            <a href="javascript:"></a>
        </div>
        <div class="social-bookmarks">
            <div class="addthis_toolbox addthis_default_style addthis_32x32_style">
                <div class="atclear" tabindex="1000"></div>
            </div>
        </div>
    </div>

    <div class="box bottom-adv"></div>

    <div class="content">

        <strong class="popup-title">输入</strong>
        <div class="popup-holder">
            <form action="http://www.xiaobi021.com/login/" data-form="ajax" method="post">
                <div class="generic-error hidden">
                </div>
                <div>
                    <div class="row">
                        <label for="login_username" class="field-label required">用户名字</label>
                        <input type="text" name="username" id="login_username" class="textfield" placeholder="输入用户名"/>
                        <div class="field-error down"></div>
                    </div>

                    <div class="row">
                        <label for="login_pass" class="field-label required">密码</label>
                        <input type="password" name="password" id="login_pass" class="textfield"/>
                        <div class="field-error down"></div>
                    </div>

                    <div class="row" th:if="${captchaEnabled==true}">
                        <div class="captcha-control">
                            <div class="image">
                                <img src="/captcha/captchaImage?type=char" alt="看不清,点击刷新"
                                     title="看不清,点击刷新"
                                     onclick="javascript:this.src=this.src"/>

                                <label for="login_code" class="field-label required">验证码</label>
                                <input type="text" name="imageCode" id="login_code" class="textfield"/>
                            </div>
                        </div>
                    </div>
                    <input type="hidden" id="redirect_uri" th:value="${redirect_uri}">

                    <div class="bottom">
                        <input type="hidden" name="action" value="login"/>
                        <input type="button" class="submit" value="登入"/>
                        <div class="links">
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="footer-margin">
        <div class="content">
            <div class="box bottom-adv">

            </div>
        </div>
    </div>
</div>
<div class="footer">
    <div class="footer-wrap">
        <ul class="nav">
            <li><a href="/video">主页</a></li>
            <li><a href="/register">注册</a></li>
            <li><a href="/login" id="login">登录</a></li>
        </ul>
        <div class="copyright">
            2012-2020 <a href="/video"></a><br>
        </div>
    </div>

    <script>
        $(function () {
            $(".submit").click(function () {
                login();
            });
        });

        function login() {
            $.showLoading("登录中");
            const username = $("input[name='username']").val();
            const password = $("input[name='password']").val();
            const imageCode = $("input[name='imageCode']").val();

            let searchURL = window.location.search;
            searchURL = searchURL.substring(1, searchURL.length);
            const redirect_uri = searchURL.split("&")[0].split("=")[1];
            console.log(redirect_uri);
            $.ajax({
                type: "post",
                url: "/login",
                data: {
                    "username": username,
                    "password": password,
                    "imageCode": imageCode,
                    "redirect_uri": $("#redirect_uri").val()
                },
                error: function (jqXHR, textStatus, errorThrown) {
                    /*错误信息处理*/
                    console.log(errorThrown);
                    $.hideLoading();
                },
                success: function (r) {
                    console.log(r);
                    if (r.code === 0) {
                        window.location.href = r.redirect_uri;
                    } else {
                        $.hideLoading();
                        $.toast(r.msg);
                    }
                }
            });
        }
    </script>
</div>
</body>
</html>
